<template>
  <div class="case">
    <h1 class="tac">{{ title }}</h1>
    <ul>
      <li v-for="(item,key) in roomList" :key="key">
        {{item.id}} - {{ item.name }}
      </li>
    </ul>  

     <el-button :plain="true" @click="open">打开消息提示</el-button>
  </div>
</template>

<script>
import Common from '@/javascript/common.js'; //导入公用方法
import Http from '@/javascript/http.js'; //导入ajax
import Api from '@/javascript/api.js'; //导入接口

export default {
  name: 'case',
  data () {
    return {
      title: '案例 - 房间请求',     
      roomList:[]
    }
  },
  methods: {
    getTest(){
        //获取id
        this.deviceId = this.$route.query.id;             
        Http.get(Api.show.rooms)
          .then(response=>{
              let code = response.data.code;
              let msg = response.data.msg;
              let obj = response.data.obj;                            
              if( code == 100 ){
                  console.log(JSON.stringify(obj));  
                  this.roomList = obj;
              }
          })
          .catch(error=>{                    
              this.$message({
                  message:error,
                  type:'error',  
                  center:true
              });
          });               
    },

    open(){
      this.$message('这是一条消息提示');
    }
    
  },
  created() {
     this.getTest();
  },
  mounted() {
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
h1{
   line-height: 300px;   
   font-size: 50px;
}
ul{
  margin-left:50px;
}

</style>
